import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { CustomStylesComponent } from './custom-styles/custom-styles.component';
import { SizeComponent } from './size/size.component';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';

export const AutocompleteConfig = {
  location: 'Autocomplete',
  description: '输入框的自动补全功能。',
  description_en: 'Automatically filled in for input.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/autocomplete/demo1/demo1.component',
      demoTitle: '简单使用',
      demoTitle_en: 'Basic use',
      demoDescription: '使用同步数据快速完成输入框补全。',
      demoDescription_en: 'Use the synchronized data to complete the input quickly.',
      devDebug: true,
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/autocomplete/demo2/demo2.component',
      demoTitle: '异步数据',
      demoTitle_en: 'Asynchronous data',
      demoDescription: '通过输入字符异步请求数据作为填充的源。',
      demoDescription_en: 'Asynchronously request data as the data source of antocomplete.',
    },
    {
      demo: CustomStylesComponent,
      codePath: 'showcase/autocomplete/custom-styles/custom-styles.component',
      demoTitle: '自定义样式',
      demoTitle_en: 'Custom Styles',
      demoDescription: '自定义下拉面板的样式。',
      demoDescription_en: 'Customize the style of the autocomplete panel.',
    },
    {
      demo: SizeComponent,
      codePath: 'showcase/autocomplete/size/size.component',
      demoTitle: '尺寸',
      demoTitle_en: 'Size',
      demoDescription: '不同尺寸',
      demoDescription_en: 'default size，large size',
    },
    {
      demo: VirtualScrollComponent,
      codePath: 'showcase/autocomplete/virtual-scroll/virtual-scroll.component',
      demoTitle: '虚拟滚动',
      demoTitle_en: 'Virtual scroll',
      demoDescription: '滚动到底部追加数据',
      demoDescription_en: 'Scroll to the bottom to append data',
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-autocomplete',
  snippet: `<input lv-input lv-autocomplete [(ngModel)]="\${1:value}"  [lvAutocompleteData]="\${2:menus}" />`,
  api: [
    {
      attribute: 'lvAutocompleteData',
      type: 'string[] | AutocompleteItem[]',
      default: '[]',
      description: `自动完成的数据源，当类型为AutocompleteItem[]时，AutocompleteItem 必须包含一个 value:string 字段，作为填充的值。`,
      description_en: `Data source that is automatically completed. When the type is AutocompleteItem[], AutocompleteItem must contain a [value:string] field as the input value.`,
    },
    {
      attribute: 'lvAutocompleteLabelTemplate',
      type: 'TemplateRef',
      default: 'null',
      description: `下拉选项的 label 自定义模板，该模板对所有选项项有效。`,
      description_en: `Customised Label template of the autocomplete item, which is valid for all items.`,
    },
    {
      attribute: 'lvAutocompleteOrigin',
      type: 'ElementRef',
      default: 'Autocomplete.ElementRef',
      description: `指定自动填充面板挂载的元素。`,
      description_en: `Specified the element to which the panel mounts.`,
    },
    {
      attribute: 'lvAutocompletePosition',
      type: 'topLeft | topCenter | topRight | bottomLeft | bottomCenter | bottomRight',
      default: 'bottomLeft',
      description: `基于触发点的位置 ('topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight')，默认为触发点的左下方。`,
      description_en: `The autocomplete panel is based on the location of trigger points ('topleft ' | 'topcenter' | 'topright ' | 'bottomleft' | 'bottomcenter ' | 'bottomright'), and it is located at the bottom-left of the trigger point. `,
    },
    {
      attribute: 'lvAutocompleteLoading',
      type: 'boolean',
      default: 'false',
      description: `加载状态，在数据源为异步数据时，配合使用。`,
      description_en: `Loading status. This parameter is used when the data source is asynchronous data.`,
    },
    {
      attribute: 'lvAutocompleteShowNoData',
      type: 'boolean',
      default: 'true',
      description: `是否显示无数据提示。`,
      description_en: `Whether to display no data view.`,
    },
    {
      attribute: 'lvAutocompleteNoDataTemplate',
      type: 'TemplateRef',
      default: 'null',
      description: `无数据视图模板。`,
      description_en: `No data view template.`,
    },
    {
      attribute: 'lvAutocompleteHeader',
      type: 'TemplateRef',
      default: 'null',
      description: `下拉面板头部模板。`,
      description_en: `Panel head template.`,
    },
    {
      attribute: 'lvAutocompleteWidth',
      type: 'string | number',
      default: '--',
      description: `下拉面板的宽度，默认自适应输入框的宽度。`,
      description_en: `Width of the autocomplete panel, which is adaptive to the width of the text box by default.`,
    },
    {
      attribute: 'lvAutocompletePanelClass',
      type: 'string',
      default: '--',
      description: `自定义下拉面板的样式类。`,
      description_en: `Customizing the style class of the panel.`,
    },
    {
      attribute: 'lvAutocompleteHighlightContent',
      type: 'string',
      default: '',
      description: '在下拉面板中高亮显示传入的内容，仅支持默认面板。',
      description_en: 'Highlight incoming content in autocomplete panel. Only the default panel is supported.',
    },
    {
      attribute: 'lvAutocompleteScroll',
      type: '{ y?: string }',
      default: '{y: 288px}',
      description: '下拉选项最大高度，超过出滚动，请配置单个选项高度的整数倍',
      description_en: 'Drop-down option maximum height, over scrolling.Set this parameter to an integer multiple of the height of a single option.',
    },
    {
      attribute: 'lvAutocompleteVirtualScroll',
      type: 'boolean',
      default: 'false',
      description: '是否使用虚拟滚动（大数据场景使用）',
      description_en: 'Whether to use virtual scrolling (used in big data scenes).'
    },
    {
      attribute: 'lvAutocompleteVirtualItemSize',
      type: 'number',
      default: '32',
      description: '每行高度。lvSize为large时，默认值为40；lvSize为default时，默认值为32；lvSize为small时，默认值为24。',
      description_en: `The height of each row. When lvSize is large, the default value is 40; when lvSize is default, the default value is 32; when lvSize is small, the default value is 24.`,
    },
    {
      attribute: 'lvAutocompleteVirtualMaxBuffer',
      type: 'number',
      default: '200',
      description: '渲染新项时最大缓冲高度',
      description_en: 'Maximum buffer height when rendering new items.'
    },
    {
      attribute: 'lvAutocompleteVirtualMinBuffer',
      type: 'number',
      default: '100',
      description: '缓冲区最小像素高度',
      description_en: 'Minimum pixel height of buffer',
    },
    {
      attribute: 'lvAutocompleteTrackBy',
      type: 'fn',
      default: '',
      description: '内容列表trackBy',
      description_en: 'Content list trackBy.'
    },
  ],
  event: [
    {
      event: 'lvAutocompleteInputChange',
      parameter: `value`,
      description: '文本框手动输入时的回调函数。',
      description_en: `Callback function used when a text box is entered manually.`,
    },
    {
      event: 'lvAutocompleteSelectedChange',
      parameter: `value`,
      description: '选中值后的回调函数。',
      description_en: `Callback function used when the value selected.`,
    },
    {
      event: 'lvAutocompleteEnterEvent',
      parameter: `value`,
      description: '回车事件的回调函数。',
      description_en: `Callback function used when trigger 'Enter' event.`,
    },
    {
      event: 'lvAutocompleteScrollEnd',
      parameter: ``,
      description: '虚拟滚动到底部时回调事件。若配置了lvScroll，请配置单个选项高度的整数倍',
      description_en: 'Callback event when virtual scrolling to the bottom.If lvScroll is configured, set this parameter to an integer multiple of the height of a single option.',
    },
    {
      event: 'lvAutocompleteScrollingChange',
      parameter: ``,
      description: '虚拟滚动中回调事件',
      description_en: 'Virtual scrolling callback event.'
    }
  ],
};
